<template>
  <view class="com-chat-list">
    <view v-for="item in cmsgList">
      <view v-if="item.type === 'timeTag'" class="time-tag">
        <text class="text">{{item.text}}</text>
      </view>
      <!-- 群通知消息 -->
	  <view v-else-if="item.type=== 'notification'" class="time-tag">
		  <text class="text">{{item.showText}}</text>
	  </view>
	  
      <!-- 发出消息 -->
      <view v-else-if="item.flow==='out'" class="msg-out">
        
		<view>
			<view>{{item.fromNick}}</view>
			<!-- 普通文本 -->
			<u-row v-if="item.type === 'text'">
			  <view class="msg" v-html="formateText(item.text)">
			  </view>
			  <view class="triangle"></view>
			</u-row>
			
			<!-- 图片 -->
			<u-image v-else-if="item.type === 'image'"
				class="img"
				:src="item.file.url"
				mode="scaleToFill"
				:width="computeWH(item.file).width"
				:height="computeWH(item.file).height">
			</u-image>
		</view>
		<!-- 头像 -->
        <u-avatar :src="item.avatar" mode="square" size="80"></u-avatar>
      </view>
      <!-- 收到消息 -->
      <view v-else-if="item.flow==='in'" class="msg-in">
        <u-avatar :src="item.avatar" mode="square" size="80"></u-avatar>
        
		<view>
			<view>{{item.fromNick}}</view>
			<u-row v-if="item.type === 'text'">
			  <view class="triangle"></view>
			  <view class="msg" v-html="formateText(item.text)">
			  </view>
			</u-row>
			
			<!-- 图片 -->
			<u-image v-else-if="item.type === 'image'"
				class="img"
				:src="item.file.url"
				mode="scaleToFill"
				:width="item.file.w"
				:height="item.file.h">
			</u-image>
		</view>
      </view>
      
     
    </view>
  </view>
</template>

<script>
  import chatEmoji from '../static/emoji.js'
  
  export default {
    props: {
      'msgList': {
        type: Array,
        default () {
          return []
        },
      },
      userInfos: {
        
      },
      myInfo: {}
    },
  	data() {
  		return {
  			
  		};
  	},
    computed: {
      cmsgList: function () {
        return this.msgList.map((item) => {
          if (item.flow === 'in') {
			let user = {};
			this.userInfos.map((it) => {
				if (it.account == item.from) {
					user = it;
				}
			})
			  
            item.avatar = user.avatar;
          } else if (item.flow === 'out') {
            item.avatar = this.myInfo.avatar;
          }
          
          if (item.type === 'notification') {
			  if (item.attach.type == 'updateTeam') {
			  	item.showText = `${item.fromNick}修改了群聊名为${item.attach.team.name}`
			  } else{
				  const { accounts, type } = item.attach
				  const accountStr = accounts.join('、');
				  item.showText = `${item.from}邀请${accountStr}加入了群聊`
			  }
           
          }
          return item;
        })
      }
    },
    beforeMount () {
      // this.computedItem();
    },
    mounted () {
      
    },
    methods: {
      formateText (text) {
        let emojiItems = text.match(/\[[^\]]+\]/g)
        if (emojiItems && emojiItems.length > 0) {
          emojiItems.forEach(item => {
            let emojiCnt = chatEmoji.emojiList.emoji
            if (emojiCnt[item]) {
              text = text.replace(item, `<img class="emoji-small" src="${emojiCnt[item].img}">`)
            }
          })
        }
        return text;
      },
      computeWH (file) {
        const mw = 520;
        const mh = 400;
        const w = file.w;
        const h = file.h;
        if (w > h) {
          if (w > mw) {
            return {
              width: mw,
              height: mw*h/w
            }
          } else {
            return {
              width: w,
              height: h
            }
          }
        } else {
          if (h > mh) {
            return {
              width: mh*w/h,
              height: mh
            }
          } else {
            return {
              width: w,
              height: h
            }
          }
        }
      }
    }
  }
</script>
<style>
  .msg >>> .emoji-small {
    width: 38rpx;
    height: 38rpx;
    vertical-align: sub;
  }
</style>
<style scoped lang="scss">
  .time-tag {
    text-align: center;
    padding: 20rpx 0;
    font-size: 24rpx;
    color: #666;
  }
  .msg-out {
    display: flex;
    justify-content: flex-end;
    margin: 20rpx 0;
    .msg {
      border-radius: 10rpx;
      padding: 20rpx;
      background: rgb(60, 197, 31);
      max-width: 520rpx;
    }
    .img {
      max-width: 520rpx;
      max-height: 400rpx;
      margin-right: 20rpx;
    }
    .triangle {
      width: 0;
      height: 0;
      border: 10rpx solid;
      border-color: transparent  transparent transparent rgb(60, 197, 31);
    }
  }
  
  .msg-in {
    display: flex;
    justify-content: flex-start;
    margin: 20rpx 0;
    .msg {
      border-radius: 10rpx;
      padding: 20rpx;
      background: #fff;
      max-width: 520rpx;
    }
    .img {
      max-width: 520rpx;
      max-height: 400rpx;
      margin-left: 20rpx;
    }
    .triangle {
      width: 0;
      height: 0;
      border: 10rpx solid;
      border-color:  transparent #fff transparent transparent ;
    }
  }

</style>
